@import "normalize";
@import "base";
@import "variable";

// 字体大小设置
.font_dpr(@font-size: 16px) {
  font-size: @font-size;

  [data-dpr= "2"] & {
    font-size: @font-size * 2;
  }
  [data-dpr= "3"] & {
    font-size: @font-size * 3;
  }
}

.main {
  .brand {
    h3 {
      width: 100%;
      padding-left: 15rem/@base;
      height: 75rem/@base;
      line-height: 75rem/@base;
      .font_dpr(16px);
      color: #9b653f;
      background-color: #eeeeee;
      border: 2rem/@base solid #d3d3d3;
    }
  }
  .brandTitle {
    li {
      a {
        display: block;
        height: 100rem/@base;
        width: 100%;
        border-bottom: 2rem/@base solid #d3d3d3;
        padding-left: 80rem/@base;
        position: relative;
      }
      .rank {
        position: absolute;
        left:20rem/@base;
        top: 30rem/@base;
        width: 40rem/@base;
        height: 40rem/@base;
        text-align: center;
        line-height: 40rem/@base;
        color: #fff;
        background-color: #c9c9c9;
      }
      .info {
        padding-top: 10rem/@base;
        width: 100%;
        line-height: 40rem/@base;
        position: relative;
        .font_dpr(14px);
        &::after {
          content: ">";
          position: absolute;
          right: 0;
          top: 0;
          height: 100rem/@base;
          line-height: 100rem/@base;
          width: 40rem/@base;
          text-align: center;
          .font_dpr(30px);
          color: #b3b1b1;
        }
      }
      .num {
        color: #b3b1b1;
      }
    }
  }
  .sales {
    li {
      a {
        display: block;
        padding: 20rem/@base;
        border-bottom: 2rem/@base solid #d3d3d3;
      }
      img {
        width: 200rem/@base;
        height: 160rem/@base;
        float: left;
      }
      .info {
        overflow: hidden;
        padding-left: 20rem/@base;
        .title {
          line-height: 45rem/@base;
          .font_dpr(14px);
        }
        .price {
          .font_dpr(16px);
            color: #ec562e;
          line-height: 45rem/@base;
        }
        span {
          color: #bdbbc2;
          margin-right: 15rem/@base;
        }
      }
    }
  }
  .comments {
    li {
      padding: 20rem/@base;
      border-bottom: 2rem/@base solid #d3d3d3;
      .pro {
        height: 234rem/@base;
        img  {
          width: 200rem/@base;
          height: 160rem/@base;
          float: left;
        }
        .info {
          overflow: hidden;
          padding-left: 20rem/@base;
        }
        .title {
          line-height: 45rem/@base;
          .font_dpr(14px);
        }
      }
      .content {
        padding: 20rem/@base;
        border: 2rem/@base solid #d3d3d3;
        background-color: #f8f8f8;
        position: relative;
        &:after {
          content: "";
          width: 0;
          height: 0;
          border:15rem/@base solid transparent ;
          position: absolute;
          top: -30rem/@base;
          left: 10%;
          border-bottom-color: #f8f8f8;
        }
        &:before {
          content: "";
          width: 0;
          height: 0;
          border:15rem/@base solid transparent ;
          position: absolute;
          top: -32rem/@base;
          left: 10%;
          border-bottom-color: #d3d3d3;
        }
      }
      .content-t {
        line-height: 50rem/@base;
        .star {
          width: 180rem/@base;
          height: 30rem/@base;
          background: url(../images/star.png) center center no-repeat;
          background-size: 180rem/@base 30rem/@base;
          position: relative;
          top: 10rem/@base;
          left: 10rem/@base;
        }
        .time {
          color: #ab9aa0;
        }
      }
      .content-b {
        line-height: 42rem/@base;
        .font_dpr(14px);
      }
    }
  }
}